<template>
	<div>
		<div class="page-title">{{ $route.meta.title }}</div>
		<div class="know-container">
			<data-tables v-loading="loading" :data="InstallDetailData" :table-props="tableProps" align="left" :show-action-bar="false" :custom-filters="customFilters" :pagination-def="paginationDef">
				<el-table-column prop="UserID" label="客户" key="UserID" sortable="custom">
				</el-table-column>
				<el-table-column prop="Uuid" label="设备标志" key="Uuid" sortable="custom">
				</el-table-column>
				<el-table-column prop="SysInfo" label="系统信息" key="SysInfo" sortable="custom">
				</el-table-column>
				<el-table-column prop="SoftInfo" label="软件信息" key="SoftInfo" sortable="custom">
				</el-table-column>
				<el-table-column prop="InstallTime" label="安装日期" key="InstallTime" sortable="custom">
				</el-table-column>
				
			</data-tables>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import api from '@/utils/api'
	export default {
		components: {

		},
		data() {
			return {
				loading: false,
				tableProps: {
					border: false, //去掉边框
					stripe: false //去掉斑马纹
				},
				customFilters: [{
					vals: '',
					props: ['DisplayName', 'Name'],
				}, {
					vals: []
				}, {
					vals: []
				}, {
					vals: []
				}, {
					vals: []
				}],
				//分页设置
				paginationDef: {
					pageSize: 10,
					pageSizes: [10, 20, 50]
				},
				dialogVisible: false,
				save_id: null,
				previewcol: false,
				//存放弹出框的数据
				colshowlog: {},
			}
		},
		computed: {
			...mapState([
				'InstallDetailData'
			])
		},
		methods: {
			...mapActions([
				'getInstallDetails'
			]),
			details(scope) {
				this.colshowlog = scope.row
				this.previewcol = true;
			},
			async getData() {
				if(this.InstallDetailData.length == 0) {
					this.loading = true
				}
				await this.getInstallDetails(this.$route.params.id)
				this.loading = false
			},
			goSeed() {
				this.$router.push({
					name: 'AddPermissions'
				})
			}
		},
		mounted() {
			this.getData()
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.AddGroup {
		color: rgb(60, 152, 255);
		font-size: 14px;
		margin-top: 10px;
		cursor: pointer;
		&-div {
			margin-top: 10px;
			&-input {
				width: 40%;
			}
			&-add {
				color: rgb(60, 152, 255);
				font-size: 14px;
				margin-top: 10px;
				cursor: pointer;
				margin-left: 15px;
			}
		}
	}

	.class_input_width {
		width: 350px;
	}

	.operation_box span {
		cursor: pointer;
		color: #8E9EBB;
		margin-right: 10px;
	}
</style>
